<template>
  <view
    style="
      background-color: #181816;
      height: 100%;
      min-height: 100vh;
      padding: 20rpx 0;
    "
  >
    <!-- 消息详情盒子 -->
    <view class="detail_box" v-model="noticeInfo">
      <view class="notice_title">{{ noticeInfo.title }}</view>
      <view class="notice_subTitle">
        <view class="notice_type">{{ noticeInfo.type_str }}</view>
        <view class="notice_time">
          {{ noticeInfo.create_time.substr(0, 10) }}
        </view>
      </view>
      <view class="notice_content" v-html="noticeInfo.content"></view>
      <view class="notice_img">
        <image :src="coverImg" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/request/api.js'
import login from '@/common/login.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      noticeInfo: {},
      coverImg: '',
    }
  },
  onLoad(option) {
    let id = option.id
    this.getNotice(id)
  },
  methods: {
    /* 消息详情页 */
    getNotice(id) {
      api
        .getNoticeDetail({
          id: id,
        })
        .then((res) => {
          console.log('接口返回:', res)
          this.noticeInfo = res.data.data
          this.coverImg =
            'https://publish.onedaen.com' + res.data.data.cover_url
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

<style lang="scss">
.detail_box {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #232428;
  width: 90%;
  margin: auto;
  border-radius: 20rpx;
  padding: 20rpx 0;

  .notice_title {
    width: 90%;
    margin: 20rpx auto;
    font-size: 32rpx;
    color: #fff;
  }

  .notice_subTitle {
    display: flex;
    width: 90%;
    margin: 20rpx auto;
    font-size: 26rpx;
    color: #666666;
    view {
      margin-right: 40rpx;
    }
  }
  .notice_content {
    width: 90%;
    white-space: pre-wrap;
    margin: 20rpx auto;
    font-size: 26rpx;
    color: #babcbb;
    word-wrap: break-word;
  }
  .notice_img {
    width: 90%;
    margin: 30rpx auto;
    height: fit-content;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
